<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>经典TodoList任务管理</title> 
		<link rel="stylesheet" href="./css/style.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />	
	</head>
	<body>
		<div class="container">
			<header>任务管理</header>
			<div class="inputField">
				<!-- TODO: 待修改代码 -->
				<input id="todoInput" type="text" placeholder="请在这里添加待办事项">
				<button id="addBtn"><i class="fa fa-plus"></i></button>
			</div>
			<ul class="todoList">
				<!-- TODO: 以下列表是静态数据，待修改代码 -->
				<li>学习Vue<span><i class="fa fa-trash"></i></span></li>
				<li>学习CSS<span><i class="fa fa-trash"></i></span></li>
				<li>学习JS<span><i class="fa fa-trash"></i></span></li>
			 </ul>
			<div class="footer">
				<!-- TODO: 待修改代码 -->
				<span>你有<span id="taskNumber">3</span>个进行中的任务</span>
				<button id="clearAll">清空</button>
			</div>
		</div>
	</body>
	<script>
		// TODO: 待补充代码
	</script>
</html>
